import {useEffect, useState} from "react";
// 图标外壳，用来调整颜色和大小的
import {Icon} from '@ricons/utils'
import {IosSunny} from "@ricons/ionicons4"
import axios from "axios";
function weather(props) {
    const [wearesult,setwearesult]  = useState({
        wea: "",
    })
    const weatherIcon = [
        {name:"晴",key:"qing"},
        {name:"雪",key:"xue"},
        {name:"雷",key:"lei"},
        {name:"沙尘",key:"shachen"},
        {name:"有雾",key:"wu"},
        {name:"冰雹",key:"bingbao"},
        {name:"多云",key:"yun"},
        {name:"雨",key:"yu"},
        {name:"阴",key:"yin"},
    ]
    const[b,setb] = useState(<span></span>)

    const a = <div className="juzhong">
        <span>天气</span>
        <span className="px-2">{weatherIcon.find(el=>el.key===wearesult.wea).name || ""}</span>
        {b}
    </div>
    // 向服务器获取天气情况
    const getweather=()=>{
        axios.get("https://www.tianqiapi.com/api?version=v6&appid=39795843&appsecret=XuA5ooah").then(res=>{
                setwearesult(()=>{
                    return {wea:"qing"}
                })
                switch (wearesult.wea){
                    case "qing":
                        setb(<Icon className="w-10px h-10px"><IosSunny/></Icon>)
                        break
                    case "bingbao":
                        setb(<Icon className="w-10px h-10px"><IosSunny/></Icon>)
                        break
                    case "lei":
                        setb(<Icon className="w-10px h-10px"><IosSunny/></Icon>)
                        break
                    case "wu":
                        setb(<Icon className="w-10px h-10px"><IosSunny/></Icon>)
                        break
                    case "yu":
                        setb(<Icon className="w-10px h-10px"><IosSunny/></Icon>)
                        break
                    case "shachen":
                        setb(<Icon className="w-10px h-10px"><IosSunny/></Icon>)
                        break
                    case "yun":
                        setb(<Icon className="w-10px h-10px"><IosSunny/></Icon>)
                        break
                    case "xue":
                        setb(<Icon className="w-10px h-10px"><IosSunny/></Icon>)
                        break
                    case "yin":
                        setb(<Icon className="w-10px h-10px"><IosSunny/></Icon>)
                        break
                    default:
                        setb(<span></span>)
                }
        })
        setTimeout(()=>{
            getweather()
        },600000)
    }
    useEffect(()=>{
        getweather()
    },[])
    return (
        wearesult.wea?a:<span>正在获取天气</span>
    )

}

export default weather